<template>
  <div>
    <el-tabs v-model="tabName" type="card">
      <el-tab-pane
        v-for="item in tabList"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      ></el-tab-pane>
    </el-tabs>
    <div class="app-container">
      <!-- <el-row>
        <el-col :span="5">
          <el-input
            size="small"
            placeholder="订单号"
            v-model="searchStr"
            class="input-with-select"
          >
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col style="text-align:right;" :span="19">
          <el-date-picker
            style="width:150px;"
            size="small"
            v-model="timeStart"
            type="date"
            placeholder="开始日期"
          >
          </el-date-picker>
          —
          <el-date-picker
            style="width:150px;"
            size="small"
            v-model="timeEnd"
            type="date"
            placeholder="结束日期"
          >
          </el-date-picker>
          <el-button style="margin-left:5px;" size="small" type="primary"
            >导出订单</el-button
          >
        </el-col>
      </el-row> -->
      <div class="cus-table" :style="{ height: tableHeight + 'px' }">
        <div class="header">
          <el-row>
            <el-col :span="8">
              <div class="header-cell">商品信息</div>
            </el-col>
            <el-col :span="2">
              <div class="header-cell">货号</div>
            </el-col>
            <el-col :span="2">
              <div class="header-cell">规格</div>
            </el-col>
            <!-- <el-col :span="2">
              <div class="header-cell">供应商</div>
            </el-col> -->
            <el-col :span="3">
              <div class="header-cell">实付款</div>
            </el-col>
            <el-col :span="2">
              <div class="header-cell">支付方式</div>
            </el-col>
            <el-col :span="3">
              <div class="header-cell">收货人</div>
            </el-col>
            <el-col :span="2">
              <div class="header-cell">订单备注</div>
            </el-col>
            <el-col :span="2">
              <div class="header-cell">操作</div>
            </el-col>
          </el-row>
        </div>
        <div
          style="border-bottom:1px solid #dfdfdf;"
          v-for="order in data"
          :key="order.id"
        >
          <div class="cell-top">
            <div>
              订单号：{{ order.order_no }} 下单时间：{{ order.created_at }}
            </div>
            <div style="text-align:right">
              <el-button
                @click="
                  detailVisible = true;
                  currentOrder = {
                    order_no: order.order_no,
                    status: order.status
                  };
                "
                style="margin-right:5px;"
                size="mini"
                >订单详情</el-button
              >
            </div>
          </div>
          <div style="width:100%;overflow:hidden; display:flex;">
            <div style="width:50%;">
              <el-row
                style="height:80px;border-right:1px solid #dfdfdf;"
                v-for="item in order.commodity"
              >
                <el-col style="height:80px;" :span="16">
                  <div class="small-cell" style="padding-right:5px;">
                    <div class="good-item">
                      <img
                        style="height:50px; width:50px !important;"
                        :src="item.img"
                        alt=""
                      />
                      <div style="width:calc(100% - 60px);">
                        <div
                          style="height:40px; line-height:20px; overflow:hidden;"
                        >
                          {{ item.name }}
                        </div>
                        <div style="line-height:40px;">
                          单价：￥{{ item.price }}
                        </div>
                      </div>
                      <div>×{{ item.number }}</div>
                    </div>
                  </div>
                </el-col>
                <el-col style="height:80px;" :span="4">
                  <div class="small-cell">{{ item.item_no }}</div>
                </el-col>
                <el-col style="height:80px;" :span="4">
                  <div style="text-align:center;" class="small-cell">
                    {{ item.spec }}
                  </div>
                </el-col>
                <!-- <el-col style="height:80px;" :span="4">
                  <div style="text-align:center;" class="small-cell">
                    供应商
                  </div>
                </el-col> -->
              </el-row>
            </div>
            <div style="width:50%; display:flex; align-items:center;">
              <div style="width:25%">
                <div
                  :style="{
                    'max-height': 80 * order.commodity.length + 'px',
                    'text-align': 'center'
                  }"
                  class="big-cell"
                >
                  <div>￥{{ order.payment }}</div>
                  <!-- <div>【含运费￥{{ order.freight }}】</div> -->
                </div>
              </div>
              <div style="width:16.66%">
                <div style="text-align:center;" class="big-cell">
                  {{ payType(order.pay_type) }}
                </div>
              </div>
              <div style="width:25%">
                <div
                  class="big-cell"
                  :style="{
                    'max-height': 80 * order.commodity.length + 'px',
                    overflow: 'hidden'
                  }"
                >
                  <el-popover
                    placement="top-start"
                    title="收货人"
                    width="200"
                    trigger="hover"
                    :content="
                      order.realname +
                        '/' +
                        order.mobile +
                        order.city_str +
                        ' ' +
                        order.detail +
                        '\n 备注：' +
                        order.remark
                    "
                  >
                    <div slot="reference">
                      {{ order.realname + "/" + order.mobile }}
                      <div>{{ order.city_str + " " + order.detail }}</div>
                      <div>备注：{{ order.remark }}</div>
                    </div>
                  </el-popover>
                </div>
              </div>
              <div style="width:16.67%">
                <div
                  class="big-cell"
                  :style="{
                    'max-height': 80 * order.commodity.length + 'px',
                    overflow: 'hidden'
                  }"
                >
                  <el-popover
                    placement="top-start"
                    title="备注详情"
                    width="200"
                    trigger="hover"
                    :content="order.admin_remark"
                  >
                    <div slot="reference">
                      {{ order.admin_remark }}
                    </div>
                  </el-popover>
                </div>
              </div>
              <div style="width:15%">
                <div class="big-cell" style="text-align:center;">
                  <el-button
                    @click="
                      operateVisible = true;
                      currentOrder = {
                        order_no: order.order_no,
                        status: order.status,
                        commodity: order.commodity
                      };
                    "
                    size="small"
                    type="primary"
                    >操作</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="text-align:right;">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="page"
          :page-size="size"
          layout="total, prev, pager, next"
          :total="total"
          :background="true"
        >
        </el-pagination>
      </div>
    </div>
    <order-detail
      :visible="detailVisible"
      :orderInfo="currentOrder"
      @close="detailVisible = false"
    ></order-detail>
    <order-operate
      :visible="operateVisible"
      :orderInfo="currentOrder"
      @close="operateVisible = false"
      :isVip="true"
    ></order-operate>
  </div>
</template>

<script>
import { getNormalOrderList } from "@/api/order-mng";
import orderDetail from "@/views/order-mng/component/order-detail";
import orderOperate from "@/views/order-mng/component/order-operate";
export default {
  name: "NormalOrder",
  data() {
    return {
      tabList: [
        {
          name: "待派单",
          id: "2"
        },
        {
          name: "待付款",
          id: "0"
        },
        {
          name: "待确认",
          id: "3"
        },
        {
          name: "待评价",
          id: "4"
        },
        {
          name: "交易完成",
          id: "1"
        },
        {
          name: "交易关闭",
          id: "-3"
        }
      ],
      tabName: "2",
      searchStr: "",
      supplier: "",
      supplierList: [],
      timeStart: "",
      timeEnd: "",
      page: 1,
      data: [],
      detailVisible: false,
      operateVisible: false,
      currentOrder: {},
      tableHeight: 600,
      total: 0,
      size: 0
    };
  },
  watch: {
    tabName: function(val) {
      this.getNormalOrderList(1, val);
    }
  },
  methods: {
    getNormalOrderList(page, type) {
      getNormalOrderList({
        page,
        status: type,
        order_no: this.searchStr ? this.searchStr : null,
        vip: 1
      }).then(res => {
        if (res.code === 200) {
          this.data = res.data.data;
          this.total = res.data.total;
          this.page = res.data.current_page;
          this.size = res.data.per_page;
        }
      });
    },
    handleCurrentChange(page) {
      this.getNormalOrderList(page, this.tabName);
    },
    payType(type) {
      let text;
      switch (type) {
        case 3:
          text = "支付宝";
          break;
        case 1:
          text = "微信支付";
          break;
        case 2:
          text = "余额支付";
          break;
      }
      return text;
    },
    changeSize() {
      //若减少值存在则对宽高进行减少，否则为默认高宽值。
      this.tableHeight = document.body.clientHeight - 250;
      window.onresize = () => {
        this.changeSize();
      };
    }
  },
  components: {
    orderDetail,
    orderOperate
  },
  mounted() {
    this.changeSize();
  },
  created() {
    this.getNormalOrderList(1, this.tabList[0].id);
  }
};
</script>

<style lang="scss" scoped>
.cus-table {
  margin-top: 5px;
  border: 2px solid #dfdfdf;
  color: #444444;
  font-size: 12px;
  overflow: auto;
  .header {
    text-align: center;
    background: #efefef;
    height: 30px;
    line-height: 30px;
  }
  .cell-top {
    background-color: rgb(248, 248, 248);
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 0 10px;
  }
  .small-cell {
    width: 100%;
    height: 100%;
    line-height: 80px;
  }
  .big-cell {
    height: auto;
    padding: 5px 0;
    display: inline-block;
    vertical-align: middle;
    word-break: break-all;
    width: 100%;
  }
  .good-item {
    display: flex;
    img {
      margin-right: 5px;
      vertical-align: middle;
      margin-top: 15px;
      margin-left: 15px;
    }
  }
}
</style>
